<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import useGlobalStore from '@/stores/global'
	
	const videoPlay = useGlobalStore().videoPlay
	
	const playSrc = ref('')

	onLoad((option) => {
		playSrc.value = option?.src || videoPlay.src
	})

	const close = () => {
		uni.navigateBack()
	}
</script>

<template>
	<view @click="close" class="mask" @touchmove.stop.prevent="() => {}">
		<view class="video">
			<video :src="playSrc" controls autoplay enable-play-gesture vslide-gesture-in-fullscreen></video>
		</view>
	</view>
</template>

<style>
	page {
		background: transparent;
	}
</style>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		// right: 0;
		// bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000a;
		backdrop-filter: blur(8px);

		.video {
			// border: 1px solid red;
			width: 100vmin;
			max-height: 100vh;

			video {
				width: 100%;
			}
		}
	}
</style>